<template>
  <view class="container" :style="appThemeStyle">
    <!-- 标题 -->
    <view class="page-title">购物币转帐</view>
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u-form :model="form" ref="uForm" label-width="140rpx">
        <u-form-item label="余额" prop="name">
          <u-input v-model="userInfo.shopping_coin" placeholder="购物币余额" />
        </u-form-item>
		<!-- <u-form-item label="手机号" prop="mobile">
		  <u-input v-model="form.mobile" placeholder="请输入对方帐号" />
		</u-form-item> -->
		<u-form-item label="手机号" prop="mobile">
			<u-input placeholder="请输入对方帐号" v-model="form.mobile" type="text" @blur="getUserName()"></u-input>
			<u-button slot="right" type="success" size="mini" :loading="isLoading">{{username}}</u-button>
		</u-form-item>
        <u-form-item label="金额" prop="amount">
          <u-input v-model="form.amount" placeholder="请输入转入金额" />
        </u-form-item>
		<u-form-item label="二级密码" prop="sec_password">
		  <u-input v-model="form.sec_password" placeholder="请输入二级密码" />
		</u-form-item>
        <u-form-item label="备注" prop="detail" :border-bottom="false">
          <u-input v-model="form.detail" placeholder="备注" />
        </u-form-item>
      </u-form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">确定转入</view>
      </view>
    </view>
  </view>
</template>

<script>
  import { isMobile } from '@/utils/verify'
  import * as UserApi  from '@/api/user'

  // 表单验证规则
  const rules = {

    mobile: [{
      required: true,
      message: '请输入对方手机号',
      trigger: ['blur', 'change']
    },{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger:  ['blur', 'change']
    }],
    amount: [{
      required: true,
      message: '请输入转入金额',
      trigger: ['blur', 'change']
    },{ 
        type: 'number', 
        message: '金额必须为数字值',
        trigger:  ['blur', 'change']
    }],
    sec_password: [{
      required: true,
      message: '请输入二级密码',
      trigger: ['blur', 'change']
    }]
  }

  export default {
    components: {
    },
    data() {
      return {
        form: {
          mobile: '',
          sec_password: '',
          amount: '',
          remark: '',
        },
        rules,
        // 按钮禁用
        disabled: false,
		userInfo:{},
		username:'对方姓名',
		isLoading:false,//是否验证对方姓名
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},

    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules)
	  this.getUserInfo()
    },

    methods: {
		// 获取对方姓名
		getUserName() {
			const app = this
			if(app.form.mobile&&/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(app.form.mobile)){
				return new Promise((resolve, reject) => {
					UserApi.infoByMobile({"mobile":app.form.mobile}, { load: true })
					.then(result => {
						uni.hideLoading();
						if(result.data.userInfo){
							app.username = result.data.userInfo.nick_name
						}else {
							app.username = "会员不存在"
						}
						resolve(app.username)
					})
					.catch(err => {
						uni.hideLoading();
						if (err.result && err.result.status == 401) {
							resolve(null)
						} else {
							reject(err)
						}
					})
				})
			}
		},
		// 获取当前用户信息
		getUserInfo() {
			const app = this
			return new Promise((resolve, reject) => {
				UserApi.info({}, { load: true })
				.then(result => {
				  app.userInfo = result.data.userInfo
				  resolve(app.userInfo)
				})
				.catch(err => {
				  if (err.result && err.result.status == 401) {
					resolve(null)
				  } else {
					reject(err)
				  }
				})
			})
		},

      // 表单提交
      handleSubmit() {
        const app = this
        if (app.disabled) {
          return false
        }
        app.$refs.uForm.validate(valid => {
			if (valid) {
				app.disabled = true
				UserApi.shoppingCoinTransferToOhter({userId:app.userInfo.user_id,data:app.form})
				.then(result => {
				  app.$toast(result.message)
				  uni.navigateBack()
				})
				.finally(() => app.disabled = false)
			}
        })
      }
    }
  }
</script>

<style>
  page {
    background: #f7f8fa;
  }
</style>
<style lang="scss" scoped>
  .page-title {
    width: 94%;
    margin: 0 auto;
    padding-top: 40rpx;
    font-size: 28rpx;
    color: rgba(69, 90, 100, 0.6);
  }

  .form-wrapper {
    margin: 20rpx auto 20rpx auto;
    padding: 0 40rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  .form-analysis {

    .analysis-foot {
      padding-bottom: 20rpx;

      .analysis-btn {
        float: right;
        background: linear-gradient(to right, $main-bg, $main-bg2);
        color: $main-text;
        border-radius: 30rpx;
        padding: 10rpx 30rpx;
        font-size: 26rpx;
      }
    }
  }

  // 底部操作栏
  .footer {
    margin-top: 80rpx;

    .btn-wrapper {
      height: 100%;
      // display: flex;
      // align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 86rpx;
      color: #fff;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn-item-wechat {
      background: #0ba90b;
      margin-bottom: 26rpx;
    }

    .btn-item-main {
      background: linear-gradient(to right, $main-bg, $main-bg2);
      color: $main-text;

      // 禁用按钮
      &.disabled {
        opacity: 0.6;
      }
    }

  }
</style>